<template>
  <div>
    <div class="bill-container">
      <!-- 左侧图片 -->
      <div class="left">
        <img :src="billboard.pic_s640" alt />
      </div>
      <!-- 右侧列表 -->
      <ul class="right">
        <li v-for="(item,index) in songList" :key="item.song_id">
          <span :style="{color:index==0?'red':index==1?'orange':'#1989fa'}">{{index+1}}.</span>
          {{item.title}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getBillList } from "@/api/baidu-music";
// type
export default {
  props: {
    type: [String, Number],
  },
  data() {
    return {
      billboard: {},
      songList: [],
    };
  },
  created() {
    getBillList(this.type, 3).then((res) => {
      console.log(res);
      this.billboard = res.billboard;
      this.songList = res.songList;
    });
  },
};
</script>

<style lang="less" scoped>
.bill-container {
  display: flex;
  padding: 10px;
  background-color: #fff;
  .left {
    width: 100px;
    flex-shrink: 0;
    img {
      width: 100%;
    }
  }

  .right {
    flex-grow: 1;
    padding: 3px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>